<template>
    <fieldset>
        <legend>失效函数的应用</legend>
        <h1 id="content" ref="hh">
            {{ content }}
        </h1>
        <button v-for="(btn, index) in buttons" :class="{ active: index + 1 === page }" :key="index"
            @click="pageChange(index + 1)">第{{ index + 1 }}页</button>
    </fieldset>
</template>
<script setup>
import { ref, onMounted, reactive, watchEffect } from 'vue'
import CancelPromise from "./cancelPromise"

//生命三个按钮

let buttons = reactive(['第一页', '第二页', '第三页'])

//模拟三个请求，响应的时间不一样

let api1 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('第一页的数据')
    }, signal)
}
)
let api2 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('第二页的数据')
    }, signal)
})

let api3 = signal => new CancelPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('第三页的数据')
    }, signal)
})

//怎么取消(中断) promise ,在promise内部直接抛出异常(throw error) 

//模拟请求
let api = {
    api1,//1000
    api2,//2000
    api3,//3000
}

//声明一个响应式的变量

let content = ref('')

//点击分页获取分页数据
//声明一个三方的响应式来作为按钮的激活条件
let page = ref(1)

let pageChange = (pageSize) => {

    //给第三方作为激活条件的变量进行赋值
    page.value = pageSize
}

//封装一个获取内容的方法
/**
 * 
 * @param {Number} pageSize 传递给后台的页码
 * @param {Object} signal 控制器( AbortController)的signal对象
 */
//  @param {数据类型} 参数 参数的描述

let fetchData = (pageSize = 1, signal) => (
    api['api' + pageSize](signal)
        .then(res => {
            console.log(res);
            content.value = res
        })
)

let hh = ref() 

//使用watchEffect

watchEffect(invalidate => {
    
    //声明一个控制器
    let abortController = new AbortController()
    //获取signal对象
    let signal = abortController.signal
    //发起请求，并且传入signal对象
    fetchData(page.value,signal)
    invalidate(() => {
        //页面切换之前，取消上一个promise
        abortController.abort()
    })
})

//watchEffect配置项
//pre dom挂载之前执行

//post dom挂 载之后执行

watchEffect(()=>{
    console.log(hh,value);
},{
    flush:'posh'
})
//页面加载的时候，获取第一页的数据

// onMounted(() => {
//     fetchData(1)
// })
</script>

<style>
.active {
    background: hotpink;
}
</style>